<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 通过服务器运行当前html文件 可以显示网络来源图片 -->
  <meta name="referrer" content="never">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/list.css">
  <link rel="stylesheet" href="../tools/jquery-pagination/pagination.css">
  <style>
    .breadcrumb{
      padding-left: 6px;
      padding-right: 6px;
    }

    .box{
      width: 800px;
      margin: 30px auto;
    }

    .m-style .prev{
      background: cyan;
      color: black;
    }
    .m-style .next{
      background: cyan;
      color: black;
    }

    .m-style .active{
      background: pink;
      color: red;
    }


  </style>
</head>
<body>
  <h1>我是一个列表页面</h1>

  <div class="pagi"></div>

  <!-- 
    为了看的清楚 将 分页器写在 列表之上 
    m-style 是 插件自带的css样式 
  -->
  <div class="box m-style" id="div1"></div>

  <div class="container">
    <ul></ul>
  </div>



  <script src="../tools/jquery.min.js"></script>
  <script src="../js/tools.js"></script>
  <script src="../js/ajax.js"></script>
  <script src="../tools/jquery-pagination/jquery.pagination.js"></script>

  <script>
    // 设定变量 存储 页数 默认值是1
    let page = 1;
    // 设定变量 存储 每页数据数量 默认值是 8 
    let line = 8;

    // 调用函数 动态生成页面
    getPage();

    // 点击 查看商品详情 


    // 设定函数 发送请求 获取 数据
    async function getPage(){
      //  1,  获取浏览器地址栏参数 向服务器发送请求
      const urlObj= myGetUrlVal();
      console.log(urlObj);

      //  2,  发送请求
      const res = await myPromiseAjax('../server/goods_list.php' , 'get' , {cat_one_id:urlObj.cat_one_id , page:page , line:line} , 'json');                          
      // res.data 存储 8条数据信息
      console.log( res );
    
      //  3,  动态生成页面
      let str = '';
      // item就是存储数据的对象
      res.data.forEach( item=>{
        str += `
        <li class="list-item">
          <div class="panel panel-primary">
            <div class="panel-body">
              <ol class="breadcrumb">
                <li><a href="#">${item.cat_one_id}</a></li>
                <li><a href="#">${item.cat_two_id}</a></li>
                <li class="active">${item.cat_three_id}</li>
              </ol>
            </div>
            <div class="panel-footer">
              <div class="row">
                <div class="">
                  <div class="thumbnail">
                    <img src="${item.goods_big_logo}" alt="...">
                    <div class="caption">
                      <h3>${item.goods_name}</h3>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <p>
                        <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a>
                        <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        
        
        `;
      })
      // 将结果写入标签中
      $('.container').html(str);

      //  4,  获取分页div标签 设定页面器
      $('.box').pagination({
        pageCount:res.sumPage,
        totalData:res.row,
        current:res.page,
        showData:res.line,
        prevCls:'prev',
        nextCls:'next',
        prevContent:'上一页',
        nextContent:'下一页',
        activeCls:'active',
        count:4,
        mode:'fixed',
        coping:'true',
        homePage:'首页',
        endPage:'末页',
        jump:true,
        callback:function(res){
          // 点击之后执行的回调函数
          console.log(res);
          // 获取当前点击 按钮 表示的页数
          console.log(res.getCurrent());
          // 将页数 设定为 page变量
          page = res.getCurrent();

          // 根据新的页数数据 可以 再次发起请求 动态生成新的页面
          getPage();
        }
      })
      
    }








  </script>


  <script>
    /*
      1,  获取 浏览器地址栏传参的 cat_one_id 数据 
          向服务器发送请求 获取对应的商品信息
    
          请求地址  '../server/goods_list.php'
          请求方式  get
          携带参数   cat_one_id 一级分类名称
                    page  显示的是第几页内容  默认是 第1页
                    line  每页显示数据的数量  根据实际需求设定 目前设定 8 
          响应体格式 json字符串

      2,  响应体数据信息
          data: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
            存储数据的数组
          line: "8"
            每页显示数据的数量
          page: "1"
            当前是第几页
          row: "57"
            相关数据的总数量
          sumPage: 8
            总共有8页

      3,  分页器插件
          jquery-pagination
            分页器插件
              jquery.pagination.js   JavaScript文件
              pagination.css         css样式
              readme.txt             说明文档地址
    
          根据 说明文档 使用插件 生成分页显示功能

            (1) 先导入 jQuery文件 
                再导入 jquery.pagination.js    pagination.css  

            (2) 创建一个div标签 设定类名等
                根据类名等 获取div标签对象 写入生成 分页器

            (3) 参数是一个对象 通过对象 设定分页器插件的选项设置
              pageCount	  9	        总页数
              totalData	  0	        数据总条数
              current	    1	        当前第几页
              showData	  0	        每页显示的条数
              prevCls	    'prev'	  上一页class
              nextCls	    'next'	  下一页class
              prevContent	'<'	      上一页节点内容
              nextContent	'>'	      下一页节点内容
              activeCls	  'active'	当前页选中状态class名
              mode         'unfixed'  模式，unfixed不固定页码按钮数量，fixed固定数量
              count	      3	        当前选中页前后页数
              coping	    false	    是否开启首页和末页，值为boolean
              homePage	  ''	      首页节点内容，默认为空
              endPage	    ''	      尾页节点内容，默认为空

              jump	      false	    是否开启跳转到指定页数，值为boolean类型
              jumpIptCls	'jump-ipt'	文本框内容
              jumpBtnCls	'jump-btn'	跳转按钮class
              jumpBtn	    '跳转'	    跳转按钮文本内容

              callback	function(参数){}	回调函数，参数"index"为当前页

                参数.getTotalPage()	  获取总页数
                参数.getCurrent()	    获取当前页
                参数.filling()


            插件总结:
              1,  加载文件 
                  先加载 jQuery文件 
                  再加载 插件的css和js文件

              2,  创建一个div标签 
                  通过jQuery的选择器 获取这个标签对象
                  执行 插件的函数方法

              3,  设定参数
                  根据实际项目需求设定

              4,  关键是 callback 属性 设定的回调函数
                  (1) 回调函数一定要有一个参数
                  (2) 参数.getCurrent() 是 获取点击的标签表示的页数
                      将结果赋值给 page 变量
                      再次调用函数 重新动态渲染 当前页数 对应的页面内容

      4,  点击 查看商品详情
        跳转 商品详情页 同时传参goods_id主键值 

    */

  </script>
</body>
</html>


<!--  



-->